<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} </view>
                <view class="availableBalance balanceCard" @click="toMyAccountBalance">
                    <view class="balanceCard_top">
                        <view class="balanceCard_top_left">账户余额（元）</view>
                        <view class="balanceCard_top_right"> <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/eye_white.png" alt="" style="width: 34rpx;height: 30rpx;"> </view>
                    </view>
                    <view class="balanceCard_bottom"> {{ walletBalance }} </view>
                </view>
                <!-- 充电桩 -->
                <view class="chargingPileBalance balanceCard" style="display: none;">
                    <view class="balanceCard_top">
                        <view class="balanceCard_top_left">充电桩余额（元）</view>
                        <view class="balanceCard_top_right"> <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/eye_white.png" alt="" style="width: 34rpx;height: 30rpx;"> </view>
                    </view>
                    <view class="balanceCard_bottom"> {{ availableBalance }} </view>
                </view>
            </view>

        </scroll-view>
        
    </view>
</template>

<script>
import {  getMyWalletBalanceApi} from '@/api/mine'
export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '我的钱包',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            walletBalance:0, //钱包余额
            availableBalance:'165.30',
        }
    },
    onLoad() {
      
    },
    onReady(){
        this.getMyWalletBalance()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 我的账户余额
        toMyAccountBalance(){
            uni.navigateTo({
                url:'/pages/minePage/accountBalance'
            })
        },
        // 我的钱包
        async getMyWalletBalance(){
            const res = await getMyWalletBalanceApi()
            console.log(res)
            if(res.code === 200){
                this.walletBalance = res.data?.walletBalance || 0
            }
        },
       
    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;

    .title{
        font-size: 60rpx;
        line-height: 60rpx;
        text-align: left;
        color: #111111;
    }
}
// 可用余额
.availableBalance{
    background: linear-gradient(137deg, #FD901A, #FF6203, #ff5907);
}
// 充电桩余额
.chargingPileBalance{
    background: linear-gradient(137deg, #059dd5, #0589d5, #0768d6);
    margin-top: 48rpx;
}
.balanceCard{
    margin-top: 48rpx;
    padding: 50rpx;
    border-radius: 12px;

    .balanceCard_top{
        display: flex;
        align-items: center;
        justify-content: space-between;

        .balanceCard_top_left{
            font-size: 26rpx;
            line-height: 26rpx;
            text-align: left;
            color: #ffffff;
        }
    }
    .balanceCard_bottom{
        margin-top: 50rpx;
        font-size: 76rpx;
        line-height: 76rpx;
        text-align: left;
        color: #ffffff;
    }
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-button--primary {
    width: 670rpx;
    height: 96rpx;
    border-radius: 48rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}
</style>
